<template>
	<view class="">
		<!--
			state_type:0(正在秒杀)
			state_type:1(等待下一场秒杀)
			state_type:2(秒杀活动结束)
		-->

		<view class="product_list">
			<view class="product" v-for="(item,index) in product" @tap="toproductdetail(item)">
				<image :src="item.cover" mode=""></image>
				<view class="product_info">
					<view class="product_info_t">
						<view class="title">
							<view class="tilte_1">{{item.name}}</view>
							<view class="tilte_2" v-if="item.tags_name">{{item.tags_name}}</view>
						</view>
						<view class="exchange_num" v-if="state_type == 0">
							<view class="progess">
								<view class="progess_choose" :style="{width:(item.buy_num/item.num)*100+'%'}">{{Math.round((item.buy_num/item.num)*100)}}%</view>
							</view>
							<view class="num">已抢购{{item.buy_num}}件</view>
						</view>
						<view class="skill_end" v-else-if="state_type == 2">
							秒杀活动已结束
						</view>
						<view class="skill_end" v-else-if="state_type == 1">
							秒杀活动即将开始
						</view>
					</view>
					<view class="product_info_b">
						<view class="product_info_b1">
							￥<text class="integral_num">{{item.price}}</text>
							<text class="price">￥{{item.show_price}}</text>
						</view>
						<view v-if="state_type == 0">
							<view class="buy buy_ing" v-if="(item.buy_num/item.num)*100 !== 100">
								马上抢
							</view>
							<view class="buy buy_end" v-else>
								已抢光
							</view>
						</view>
						<view v-else-if="state_type == 2">
							<view class="buy buy_end">
								已结束
							</view>
						</view>
						<view v-else-if="state_type == 1">
							<view class="buy buy_will">
								抢先看
							</view>
						</view>

					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	// import {
	// 	skill,
	// 	seckillGoods
	// } from '@/common/skill.js'
	import uniLoadMore from '@/components/uni-load-more.vue';
	export default {
		props: {
			product: {
				type: Array
			},
			state_type: {
				type: Number
			}
		},
		components: {
			uniLoadMore,
		},
		data() {
			return {
				loadflag: true,
			}
		},
		methods: {
			toproductdetail(item) {
				if(this.state_type != 2){
					this.$emit('toproductdetail', item.id)
				}
			},
		}
	}
</script>

<style lang="less" scoped>
	.product_list {
		margin: auto;
		padding: 10upx 30upx;

		.tilte {
			font-size: 32upx;
			color: #333333;
			font-weight: bold;
			margin-bottom: 30upx;
		}

		.product {
			margin-bottom: 20upx;
			height: 259upx;
			box-sizing: border-box;
			background-color: #FFFFFF;
			display: flex;
			align-items: center;
			border-top: 2upx solid #f9f9f9;

			image {
				width: 200upx;
				height: 200upx;
				margin-right: 25upx;
				border-radius: 10upx;
			}

			.product_info {
				flex: 1;
				height: 200upx;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				position: relative;

				.product_info_t {
					.title {
						font-size: 28upx;
						color: #CDCDCD;
						height: 95upx;
						line-height: 36upx;

						.tilte_1 {
							font-size: 30upx;
							color: #000;
							margin-bottom: 6upx;
							height: 45upx;
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
							width: 455upx;
						}
					}

					.exchange_num {
						display: flex;
						align-items: center;
						line-height: 24upx;
						margin-top: 10upx;
						display: flex;
						justify-content: space-between;

						.progess {
							width: 300upx;
							height: 22upx;
							background-color: #E3E3E3;
							border-radius: 10upx;
							box-sizing: border-box;
							overflow: hidden;

							.progess_choose {
								background: -webkit-linear-gradient(left, #F3AE3D 40%, #FF2842 100%);
								height: 22upx;
								border-radius: 10upx;
								color: #fff;
								text-align: center;

							}
						}

						.num {
							color: #CDCDCD;
						}

						font-size: 24upx;
						color: #f73e2f;
					}

					.skill_end {
						color: red;
						font-size: 26upx;
					}
				}

				.product_info_b {
					display: flex;
					justify-content: space-between;
					align-items: flex-end;

					.product_info_b1 {

						font-size: 24upx;
						color: #f73e2f;

						.integral_num {
							font-size: 30upx;
							font-weight: bold;
						}

						.price {
							margin-left: 20upx;
							color: #999999;
							text-decoration: line-through;
						}
					}

					.buy {
						width: 140upx;
						height: 50upx;
						font-size: 28upx;
						color: #FFFFFF;
						text-align: center;
						line-height: 50upx;
						border-radius: 24upx;
					}

					.buy_ing {
						background: linear-gradient(to right, #FD7377 20%, #FF2741 100%);
					}

					.buy_end {
						background: #CCCCCC;
					}

					.buy_will {
						background: #7246DD;
					}
				}

			}
		}
	}
</style>
